<template>
	<view class="content">
		<u-navbar  title="个性标签":background="{background: '#000'}" back-icon-color="#ffffff" title-color="#fff" :border-bottom="false" hover-class="none">
			<view class="" style="position: absolute;right: 40rpx;color: #D6A666;font-size: 30rpx;" @click="editrequest">保存</view>
		</u-navbar>
		<view style="height: 40rpx;"></view>
		<view class="wid90 mar" style="color: #fff;">个性标签</view>
		<view style="height: 40rpx;"></view>
		<view class="flex-w wid90 mar" style="">
			<view v-for="(item,index) in gx" :key="index" class="flex disAl" style="margin-bottom: 30rpx; margin-right: 20rpx;">
				<view class="flex-c biaoqian" @click="gxClick(item.type,index)"
					:style="item.type != 0?'border: 1rpx solid #D6A666;color: #D6A666;':''">{{item.name}}</view>
			</view>
		</view>
		
		<view style="height: 40rpx;"></view>
		<view class="wid90 mar" style="color: #fff;">交友态度</view>
		<view style="height: 40rpx;"></view>
		<view class="flex-w disAl wid90 mar" style="">
			<view v-for="(item,index) in jy" :key="index" class="flex disAl" style="margin-bottom: 30rpx; margin-right: 20rpx;">
				<view class="flex-c biaoqian" @click="jyClick(item.type,index)"
					:style="item.type != 0?'border: 1rpx solid #D6A666;color: #D6A666;':''">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HOSTURL: this.$HOSTURL,
				gx: [],
				jy: [],	
				gxString: '',
				jyString: '',
				num:0
			}
		},
		onLoad(options) {
			this.i = options.i
			this.list();
		},
		methods: {
			gxClick(type,index){
				var that = this;
				if(type==0){
					if(that.num>=8){
						uni.showToast({
						    title: '最多选择8个标签',
							icon: 'none',
						    duration: 2000
						})
						return;
					}
					that.gx[index].type=1
					that.num++;
				}else{
					that.gx[index].type=0
					that.num--;
				}
			},
			jyClick(type,index){
				var that = this;
				if(type==0){
					if(that.num>=8){
						uni.showToast({
							title: '最多选择8个标签',
							icon: 'none',
							duration: 2000
						})
						return;
					}
					that.jy[index].type=1
					that.num++;
				}else{
					that.jy[index].type=0
					that.num--;
				}
			},
			async list(){
				var that = this;
				const {data: res} = await that.$Request({
					url: 'api/user/gxjy',
					data: {
						sex: uni.getStorageSync('sex')=='男'?'1':'2',
						user_id:uni.getStorageSync('uid')
					}
				})
				that.gx=res.data.personality_tag
				that.jy=res.data.make_friends
				that.num=res.data.num
			},
			async editrequest(){
				var that = this;
				var gx = that.gx.filter(item => item.type === 1);
				var jy = that.jy.filter(item => item.type === 1);
				
				const {data: res} = await that.$Request({
					url: 'api/user/editgxjy',
					data: { 
						personality_tag:JSON.stringify(gx),
						make_friends:JSON.stringify(jy),
						user_id:uni.getStorageSync('uid')
					}
				})
				if(res.code==200){
					uni.showToast({
						title:'修改成功'
					})
					uni.navigateBack()
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #000;
		height: 100vh;
	}
	.biaoqian{
		font-size: 25rpx;
		height: 52rpx;
		padding: 0 20rpx;
		border: 1rpx solid #fff;
		color: #fff;
		border-radius: 50rpx;
	}
	
</style>
